<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- boot文件 -->
    <link rel="stylesheet" href="./css/bootstrap.css"/>
    <script src="./js/jquery-3.3.1.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <!-- 自定义样式文件-->
    <link rel="stylesheet" href="./css/base.css"/>
    <link rel="stylesheet" href="./css/foot.css"/>
    <!-- 图标引入 -->
    <link rel="stylesheet" type="text/css" href="./font/iconfont.css">
    <title>底部</title>
</head>
<body>
    <div class="foot base-color pb-5">
        <div class="container">
            <!-- 上 : 四栏-->
            <div class="up row">
                <!-- logo-->
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img class="mt-5 w-100" src="img/foot/logo.png"/>
                    </a>
                </div>
                <!-- login & help-->
                <div class="col-md-3 col-sm-6">
                    <ul class="list-unstyled">
                        <li class="mb-4"><a href="">说出你想要的</a></li>
                        <li class="mb-4"><a href="">门店位置</a></li>
                        <li class="mb-4"><a href="">帮助</a></li>
                    </ul>
                </div>
                <!-- 二维码-->
                <div class="col-md-3 col-sm-6">
                    <ul class="list-unstyled">
                        <li class="text-white">扫描关注官方微信</li>
                        <li>
                            <img src="img/foot/footer-qrCode-btn.jpg"/>
                            <div class="qr">
                                <i class="iconfont icon-triangle-left"></i>
                                <img src="img/foot/footer-wechat-qrCode.jpg" class="w-50"/>
                            </div>
                        </li>
                        <li class="text-white">扫描下载官方APP</li>
                        <li>
                            <img src="img/foot/footer-qrCode-btn.jpg"/>
                            <div class="qr">
                                <i class="iconfont icon-triangle-left"></i>
                                <img src="img/foot/footer-app-qrCode.png" class="w-50"/></div>
                        </li>
                    </ul>
                </div>
                <!-- 联系我们-->
                <div class="col-md-3 col-sm-6">
                    <ul class="list-unstyled">
                        <li><a href="#">联系我们</a></li>
                        <li>
                            <a href="mailto:kaopubukaopu@kaopu.cn">
                                <i class="iconfont icon-youjian"></i>
                                kaopubukaopu@kaopu.cn
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-msnui-telephone"></i>
                                400-0066-802（Anytime）
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-xinxi"></i>
                                在线客服（Anytime）
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-weibo"></i>
                                官方微博
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 下 : 备案信息-->
            <div class="down">
                <ul class="list-unstyled">
                    <li class="float-left mr-4 ml-2" >
                        <span class="text-white zpy-font">XXXX备 xxxxxxxxx号</span>
                    </li>
                    <li class="float-left mr-2" >
                        <a href="#">使用条款&nbsp;&nbsp;&nbsp;|</a>
                    </li>
                    <li class="float-left mr-2 ml-2">
                        <a href="#">隐私政策&nbsp;&nbsp;&nbsp;|</a>
                    </li>
                    <li class="float-left ml-2">
                        <a href="#">退换货政策</a>
                    </li>
                </ul>
                <br/>
                <p class="text-white zpy-font">
                    <img src="img/foot/icon-b.png"/>
                    XX网安备 xxxxxxxxxxxxx号
                </p>
                <p class="text-white zpy-font">©2018 保留所有权利。kaopubukaopu.com.cn/kaopu.cn上的任何部分都不得以任何形式被复制、再传播，或篡改。</p>
                <p class="text-white zpy-font">欢迎您使用XXXXXXXXXXX网站！ XXXXXXXX网站由XXXXXXX有限责任公司委托XXXXXXXX有限公司进行运营和维护。</p>
            </div>
        </div>
    </div>
</body>
</html>